<template>
  <div class="guide">
    <div class="jumptimeBox" @click="cltimer">跳过 {{ this.count }} S</div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="bannerItem" v-for="(l, i) in list" :key="i">
        <van-image class="bannerImg" :src="l.pic" alt=""></van-image>
        <van-button
          @click="gotoMovie"
          v-show="i == list.length - 1"
          type="info"
          class="g-btn"
          >进入主页</van-button
        >
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// import axios from "axios";
var timer = null;
export default {
  name: "guide",
  data() {
    return {
      list: [
        {
          pic: require("@/assets/banner/wallhaven-57d1p5.jpg"),
        },
        {
          pic: require("@/assets/banner/wallhaven-eoejqw.jpg"),
        },
        {
          pic: require("@/assets/banner/wallhaven-eyzolk.jpg"),
        },
        {
          pic: require("@/assets/banner/wallhaven-nm7ylk.jpg"),
        },
      ],
      count: 8,
    };
  },
  methods: {
    gotoMovie() {
      this.$router.push({ name: "movie" });
    },
    cltimer() {
      clearInterval(timer);
      timer = null;
      this.gotoMovie();
    },
  },
  mounted() {
    // axios
    //   .get("http://47.104.209.44:3333/top/playlist?limit=5&order=new")
    //   .then((res) => {
    //     this.$nextTick(() => {
    //       //在下次DOM更新循环结束之后执行延迟回调，
    //       //在数据完全接收之后执行，
    //       //相当于小型的setTimeOut
    //       this.list = res.data.playlists;
    //     });
    //   });

    //跳过计时器
    timer = setInterval(() => {
      this.count--;
      console.log(this.count);
      if (this.count <= 0) {
        clearInterval(timer);
        timer = null;
        this.gotoMovie();
      }
    }, 1500);
  },
};
</script>

<style lang="scss" scoped>
.guide,
.my-swipe,
.bannerItem,
.bannerImg {
  width: 100%;
  height: 100%;
}

// 跳过倒计时
.jumptimeBox {
  position: absolute;
  right: 5%;
  top: 2%;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: 0.5);
  line-height: 18px;
  padding: 5px;
  border-radius: 18px;
  color: white;
}
.guide {
  position: relative;
  .my-swipe {
    position: relative;
    .bannerItem {
      position: relative;

      .g-btn {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }
    }
  }
}
</style>